<div class="card mb-3" id="fieldset_add_user_login">
  <div class="card-header">{{ t('Login Information') }}</div>
  <div class="card-body">
    <div class="item">
      <label for="select_pred_username">{{ t('User name:') }}</label>
      <span class="options">
        <select name="pred_username" id="select_pred_username" title="{{ t('User name') }}">
          <option value="any"{{ predefined_username == 'any' ? ' selected' }}>{{ t('Any user') }}</option>
          <option value="userdefined"{{ predefined_username == 'userdefined' ? ' selected' }}>{{ t('Use text field') }}</option>
        </select>
      </span>
      <input type="text" spellcheck="false" name="username" id="pma_username" class="autofocus" maxlength="{{ username_length }}" title="{{ t('User name') }}"
        {%- if username is not empty %} value="{{ username }}"{% endif -%}
        {{- predefined_username == 'userdefined' ? ' required' }}>

      <div id="user_exists_warning" class="hide">
        {{ t('An account already exists with the same username but possibly a different hostname.')|notice }}
      </div>
    </div>

    <div class="item">
      <label for="select_pred_hostname">
        {{ t('Host name:') }}
      </label>
      <span class="options">
        <select name="pred_hostname" id="select_pred_hostname" title="{{ t('Host name') }}"
          {{- this_host is not null and this_host != 'localhost' and this_host != '127.0.0.1' ? ' data-thishost="' ~ this_host ~ '"' }}>
          <option value="any"{{ predefined_hostname == 'any' ? ' selected' }}>{{ t('Any host') }}</option>
          <option value="localhost"{{ predefined_hostname == 'localhost' ? ' selected' }}>{{ t('Local') }}</option>
          {% if this_host is not empty %}
            <option value="thishost"{{ predefined_hostname == 'thishost' ? ' selected' }}>{{ t('This host') }}</option>
          {% endif %}
          <option value="hosttable"{{ predefined_hostname == 'hosttable' ? ' selected' }}>{{ t('Use host table') }}</option>
          <option value="userdefined"{{ predefined_hostname == 'userdefined' ? ' selected' }}>{{ t('Use text field') }}</option>
        </select>
      </span>
      <input type="text" name="hostname" id="pma_hostname" maxlength="{{ hostname_length }}" value="{{ hostname|default('%') }}" title="
        {{- t('Host name') }}"{{ predefined_hostname == 'userdefined' ? ' required' }}>

      {{ show_hint(t('When Host table is used, this field is ignored and values stored in Host table are used instead.')) }}
    </div>

    <div class="item">
      <label for="select_pred_password">{{ t('Password:') }}</label>
      <span class="options">
        <select name="pred_password" id="select_pred_password" title="{{ t('Password') }}">
          {% if is_change %}
            <option value="keep" selected>{{ t('Do not change the password') }}</option>
          {% endif %}
          <option value="none"{{ username is not null and not is_change ? ' selected' }}>{{ t('No password') }}</option>
          <option value="userdefined"{{ username is null ? ' selected' }}>{{ t('Use text field') }}</option>
        </select>
      </span>
      <input type="password" spellcheck="false" id="text_pma_pw" name="pma_pw" title="{{ t('Password') }}"{{ username is null ? ' required' }}>
      <span>{{ t('Strength:', context = 'Password strength') }}</span>
      <meter max="4" id="password_strength_meter" name="pw_meter"></meter>
      <span id="password_strength" name="pw_strength"></span>
    </div>

    <div class="item" id="div_element_before_generate_password">
      <label for="text_pma_pw2">{{ t('Re-type:') }}</label>
      <span class="options">&nbsp;</span>
      <input type="password" spellcheck="false" name="pma_pw2" id="text_pma_pw2" title="{{ t('Re-type') }}"{{ username is null ? ' required' }}>
    </div>

    <div class="item" id="authentication_plugin_div">
      <label for="select_authentication_plugin">
        {% if is_new %}
          {{ t('Authentication plugin') }}
        {% else %}
          {{ t('Password hashing method') }}
        {% endif %}
      </label>
      <span class="options">&nbsp;</span>

      <select name="authentication_plugin" id="select_authentication_plugin">
        {% for plugin_name, plugin_description in active_auth_plugins %}
          <option value="{{ plugin_name }}"{{ plugin_name == auth_plugin ? ' selected' }}>{{ plugin_description }}</option>
        {% endfor %}
      </select>

      <div id="ssl_reqd_warning"{{ auth_plugin != 'sha256_password' ? ' class="hide"' }}>
        {% apply notice %}
          {{ t("This method requires using an '<em>SSL connection</em>' or an '<em>unencrypted connection that encrypts the password using RSA</em>'; while connecting to the server.")|raw }}
          {{ show_mysql_docu('sha256-authentication-plugin') }}
        {% endapply %}
      </div>
    </div>
    {# Generate password added here via jQuery #}
  </div>
</div>
